<template>
    <div class="fan">
        <router-link to="/goumai" style=" color: #000;"><返回</router-link>  
    </div>
<div class="demo-type">
    <el-avatar :size="60" src="/images/zyb2.jpg" @error="errorHandler">
      <img
        src="/images/zyb2.jpg"
      />
    </el-avatar>
  </div>
  <p class="mi">何咕噜啾咪></p>
  <p class="id">1分钟前来过|卖出192件宝贝|好评率94%</p>
  <hr>
<!--  -->
  <div>
    <div class="avatar-container">
 <img class="imgs" src="/images/yifu.jpg" alt="">
<p class="wen">￥98</p>
<span class="han">含运费12元</span>
<el-button type="info" round class="mai"style="width: 150px;">立即购买</el-button>
  </div>
  <div class="tou">
    <el-avatar :size="50" src="/images/qian.jpg" @error="errorHandler">
      <img
        src="/images/qian.jpg"
      />
    </el-avatar>
  </div>
  <div class="tiao">
    <p>公司看见了四大金刚烦死了肯定感受到苦尽甘来开始的圣诞快乐加工费莱克斯顿收到科技股份莱克斯顿</p>
  </div>

  <!--  -->
  <div class="tou2">
    <el-avatar :size="50" src="/images/zyb5.jpg" @error="errorHandler">
      <img
        src="/images/zyb5.jpg"
      />
    </el-avatar>
  </div>
  <div class="tiao2">
    <p>反馈跟进哦老婆说的闪光灯开公平速度快收到开过票</p>
  </div>
<!--  -->
<div class="tou3">
    <el-avatar :size="50" src="/images/qian.jpg" @error="errorHandler">
      <img
        src="/images/qian.jpg"
      />
    </el-avatar>
  </div>
  <div class="tiao3">
    <p>请立即购买</p>
  </div>
<!--  -->

<div class="tou4">
    <el-avatar :size="50" src="/images/zyb5.jpg" @error="errorHandler">
      <img
        src="/images/zyb5.jpg"
      />
    </el-avatar>
  </div>
  <div class="tiao4">
    <p>好</p>
  </div>

  </div>
</template>
<script setup>

</script>
<style scoped>
.fan{
    margin-bottom: 20px;
    font-size: 20px;
    color: #000;
}
.mi{
    margin-left: 70px;
    margin-top: -60px;
}
.id{
    margin-left: 70px;
    margin-top: -10px;
    color: darkgrey;
}
/*  */
avatar-container {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  width: 1000px; /* 设置容器宽度 */
  height: 100px; /* 设置容器高度 */
  display: flex;
  margin-left: 250px;
  margin-top: 20px;
  /* justify-content: center;
  align-items: center; */
}
.imgs {
  width: 70px; /* 设置头像宽度 */
  height: 70px; /* 设置头像高度 */
  margin-left: 140px;
  margin-top: 20px;
}
.wen{
  margin-left: 220px;
  margin-top:-70px;
  font-size: 20px;
  color: rgb(207, 23, 23);
}
.han{
    margin-left: 220px;
  margin-top:40px;
  font-size: 15px;
  color: darkgrey;
}
.mai{
    margin-left: 600px;
    margin-top:-50px;
}

/*  */
.tou{
    margin-left: 230px;
    margin-top:50px;
}
.tiao{
    width: 370px;
    height: 55px;
    background-color: darkgray;
    margin-left: 300px;
    margin-top:-65px;
}
.tou2{
    margin-left: 800px;
    margin-top:80px;
}
.tiao2{
    width: 300px;
    height: 55px;
    margin-left: 480px;
    margin-top:-65px;
    background-color: rgb(236, 219, 28);
}
.tou3{
    margin-left: 230px;
    margin-top:100px;
}
.tiao3{
    width: 150px;
    height: 30px;
    background-color: darkgray;
    margin-left: 300px;
    margin-top:-60px;
    text-align: center;
}
.tou4{
    margin-left: 800px;
    margin-top:60px;
}
.tiao4{
    width: 30px;
    height: 30px;
    margin-left: 750px;
    margin-top:-55px;
    text-align: center;
    background-color: rgb(236, 219, 28);
}
</style>